import React, { createRef } from "react";
import { Layout } from "antd";
import { RootState, useSelector } from "@/redux";
import { useLocation, useOutlet } from "react-router-dom";
import { RouteObjectType } from "@/router/interface";
import styles from "@/layouts/index.module.css";

type RouteTypeWithNodeRef = {
  nodeRef?: React.Ref<HTMLElement> | undefined;
} & RouteObjectType;

const LayoutMain: React.FC = () => {
  const { Content } = Layout;
  // TODO: 根据收集的菜单 获取节点ref引用 当前菜单写死
  const Outlet = useOutlet();
  const { pathname } = useLocation();
  const flatMenuList = useSelector((state: RootState) => state.auth.flatMenuList);
  const menuList: RouteTypeWithNodeRef[] = flatMenuList.map(item => ({ ...item, nodeRef: createRef() }));
  const { nodeRef } = menuList.find(route => route.path === pathname) ?? {};

  return (
    <>
      <Content ref={nodeRef} className={styles.main}>
        <div className={styles.mainContent}>{Outlet}</div>
      </Content>
    </>
  );
};

export default LayoutMain;
